import { useState } from 'react';
import './ToDoList.css'
function ToDoList() {
    const [todoList, setTodoList] = useState(
        [
            { title: '吃饭', status: 0 },
            { title: '睡觉', status: 0 },
            { title: '打游戏', status: 0 },
        ]
    );
    return (
        <>
            <h2>ToDoList</h2>
            {
                todoList.map((item, index) => {
                    return (
                        <div key={index} className="todo">
                            <div>
                                <input type="checkbox" checked={item.status === 1} onChange={() => {
                                    // 修改状态
                                    const newTodoList = [...todoList];
                                    newTodoList[index].status = item.status === 1 ? 0 : 1;
                                    setTodoList(newTodoList);
                                }} />
                                &nbsp; &nbsp;
                                <span>{item.title}</span>
                            </div>
                            <button className='errorButton' onClick={() => {
                                // 删除
                                const newTodoList = [...todoList];
                                newTodoList.splice(index, 1);
                                setTodoList(newTodoList);
                            }}>
                                删除
                            </button>
                        </div>
                    )
                })
            }
        </>
    );
}


export default ToDoList;